<template>
  <div
    class="verifyprocess"
    :style="{
      'background-size': deviceSize,

      width: deviceWidth,
      height: deviceHeight
    }"
  >
    <img class="bg" src="../assets/img/审核中@2x.png" />
    <p class="content">
      等待后台人员审核添加数据
    </p>
    <span
      :style="{
        position: 'absolute',
        bottom: '1.5rem',
        left: '50%',
        transform: 'translateX(-50%)',
        background: '#FFE400',
        display: ' inline-block',
        width: deviceBtnWidth,
        height: ' 3.0625rem',
        color: '#fff',
        'line-height': '3.0625rem',
        'text-align': 'center',
        'font-size': ' 1.4578125rem',
        'font-weight': ' bold',
        'border-radius': ' 1.53125rem',
        'text-shadow': ' 1px 1px 20px red'
      }"
      >等待审核中...</span
    >
  </div>
</template>
<script>
export default {
  data() {
    return {
      deviceHeight: "",
      deviceWidth: "",
      deviceSize: "",
      deviceBtnWidth: ""
      //   devicePosition: ""
    };
  },
  mounted() {
    pushHistory();
    function pushHistory() {
      var state = {
        title: "title",
        url: "#"
      };
      window.history.pushState(state, "title", "#");
    }

    if (typeof window.addEventListener != "undefined") {
      window.addEventListener(
        "popstate",
        function(e) {
          WeixinJSBridge.invoke("closeWindow", {}, function(res) {});
        },
        false
      );
    } else {
      window.attachEvent("popstate", function(e) {
        WeixinJSBridge.invoke("closeWindow", {}, function(res) {});
      });
    }
  },
  created() {
    // localStorage.removeItem("pageName");

    this.initPage();
  },
  methods: {
    initPage() {
      var _this = this;
      (function(doc, win) {
        var docEl = doc.documentElement, //根元素html
          //判断窗口有没有orientationchange这个方法，有就赋值给一个变量，没有就返回resize方法。
          resizeEvt =
            "orientationchange" in window ? "orientationchange" : "resize",
          recalc = function() {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            _this.deviceHeight = docEl.clientHeight + "px";
            _this.deviceWidth = docEl.clientWidth + "px";
            _this.deviceSize =
              docEl.clientWidth + "px" + " " + docEl.clientHeight + "px";
            // _this.devicePosition = `0 ${_this.$scaleHeight(58)}`;
            _this.deviceBtnWidth = 330 * (docEl.clientWidth / 375) + "px";

            console.log(_this.deviceSize, _this.devicePosition);
          };

        // 切换手机改变尺寸时执行
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false); //addEventListener事件方法接受三个参数：第一个是事件名称比如点击事件onclick，第二个是要执行的函数，第三个是布尔值
        doc.addEventListener("DOMContentLoaded", recalc, false); // 绑定浏览器缩放与加载时间

        //  刷新手机时执行
        _this.deviceHeight = docEl.clientHeight + "px";
        _this.deviceWidth = docEl.clientWidth + "px";
        _this.deviceSize =
          docEl.clientWidth + "px" + " " + docEl.clientHeight + "px";
        _this.deviceBtnWidth = 330 * (docEl.clientWidth / 375) + "px";
        // _this.devicePosition = `0 ${_this.$scaleHeight(58)}`;
        console.log(_this.deviceSize, _this.devicePosition);
      })(document, window);
    }
  }
};
</script>
<style lang="scss">
// $color-primary: #fff;
// .mint-header {
//   background-color: $color-primary;
//   color: #333;
//   font-weight: Bold;
//   font-size: 18px;
//   height: 58px;
// }
.verifyprocess {
  background: url("../assets/img/图层4@2x.png") no-repeat;
  position: relative;
}
.bg {
  // 232 / 32
  width: 7.25rem;
  //   203 / 32
  height: 6.34375rem;
  position: absolute;
  bottom: 10.625rem;
  left: 50%;
  transform: translateX(-50%);
}
.content {
  margin: 0;
  padding: 0;
  white-space: nowrap;
  position: absolute;
  bottom: 8.81875rem;
  left: 50%;
  transform: translateX(-50%);
}
</style>
